import React from 'react'

class Item extends React.Component {
  state = {
    showRemoveButton: false // 显示删除按钮
  }

  handleCheck = id => {
    return () => {
      this.props.checkTodoItem(id)
    }
  }

  handleMouseEvent = flag => {
    return () => {
      this.setState({
        showRemoveButton: flag
      })
    }
  }

  handleDeleteTodo = id => {
    return () => {
      console.log(24, id)
      this.props.deleteTodoItem(id)
    }
  }

  render() {
    const { id, name, done } = this.props
    const { showRemoveButton } = this.state

    return (
      <li
        className="list-group-item"
        onMouseEnter={this.handleMouseEvent(true)}
        onMouseLeave={this.handleMouseEvent(false)}>
        <div className="form-check">
          <input className="form-check-input" type="checkbox" checked={done} onChange={this.handleCheck(id)} />
          <label className="form-check-label">{name}</label>
          <button
            className="btn btn-sm btn-danger"
            style={{ display: !showRemoveButton ? 'none' : 'inline-block' }}
            onClick={this.handleDeleteTodo(id)}>
            删除
          </button>
        </div>
      </li>
    )
  }
}

export default Item
